<template>
    <header class="head">
        <el-row class="head-row">
            <el-col :span="8" class="headflex">
                <el-icon :size="20" class="cursor icon"> 
                    <ArrowLeftBold v-if="!collapse" @click="toggleclick(true)"></ArrowLeftBold>
                    <ArrowRightBold v-else @click="toggleclick(false)" ></ArrowRightBold>
                </el-icon>
                <h2 class="title">社区疫情管理系统</h2>
            </el-col>
            <el-col :span="8" class="headflex">
                <marquee behavior="" direction="" class="martext">
                    戴口罩,勤洗手,防疫人人有责
                </marquee>
            </el-col>
            <el-col :span="8" class="headitem">
                <div class="headinfo" v-if="userInfo">
                    <el-dropdown @command="handleCommand">
                        <p class="name">
                            <span>{{userInfo.username}}</span>
                            <el-icon class="el-icon--right" size="20">
                                <ArrowDown/>
                            </el-icon>
                        </p>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="home">首页</el-dropdown-item>
                                <el-dropdown-item command="mine">个人中心</el-dropdown-item>
                                <el-dropdown-item command="pass">修改密码</el-dropdown-item>
                                <el-dropdown-item command="anno-list">公告</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>

                    <el-tag class="ml10" effect="dark" :color="roleList.find(item=>item.value==userInfo.role).color" >
                        {{roleList.find(item=>item.value==userInfo.role).label }}
                    </el-tag>
                    <el-tooltip 
                        content="切换头像"
                        placement="bottom"
                        effect="dark"
                    >
                         <Avatar class="ml10 cursor" ></Avatar>
                    </el-tooltip>

                     <el-button @click="logoutAction" :icon="SwitchButton" circle  class="ml10"/>
                </div>
            </el-col>
        </el-row>

        <el-dialog
            v-model="dialogVisible"
            title="修改登录密码"
            width="30%"
            :before-close="handleClose"
        >
            <el-form
                label-position="top"
                label-width="100px"
                :model="form"
                class="myform"
                ref="myform"
                :rules="rules"
            >   
                    <el-form-item 
                        label="旧密码"
                        prop="oldpass"
                    >
                        <el-input clearable  v-model="form.oldpass" :prefix-icon="Lock"  show-password type="password"  placeholder="请输入旧密码" />
                    </el-form-item>
                    <el-form-item 
                        label="新密码"
                        prop="newpass"

                    >
                        <el-input clearable @blur="checkDbNewPass" v-model="form.newpass" :prefix-icon="Lock"  show-password type="password"  placeholder="请输入新密码" />
                    </el-form-item>
                    <el-form-item 
                        label="确认新密码"
                        prop="dbnewpass"
                    >
                        <el-input clearable v-model="form.dbnewpass" :prefix-icon="Lock"  show-password type="password"  placeholder="请确认新密码" />
                    </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="danger" @click="changePass"
                    >修改</el-button
                    >
                </span>
            </template>
        </el-dialog>
    </header>
</template>

<script>
import {computed, reactive,toRefs,ref} from 'vue'
import {ArrowLeftBold,ArrowRightBold,AddLocation,ArrowDown,SwitchButton,Lock} from "@element-plus/icons-vue"
import { useStore } from 'vuex'
// import {roleList } from "@/utils"
import Avatar from "./Avatar.vue"
import {ElMessage,ElMessageBox} from "element-plus"
import { useRouter } from 'vue-router'
import {reg} from "@/utils/validate"
import {ajax} from '@/api'
export default {
    components:{
        // 组件必须要注册 
        ArrowRightBold,
        AddLocation,
        ArrowLeftBold,
        ArrowDown,
        Avatar
    },
    setup(props){
        const myform = ref()
        const router = useRouter()
        const store = useStore()
        const checkDbPass = (rule,value,callback)=>{
            if(state.form.newpass!=value){
                callback(new Error('两次密码不一样!!!'))
            }else{
                callback()
            }
        }
        const checkDbNewPass = ()=>{
            // 两次密码正则通过 才回去比较2次密码是否一致 
            if(reg.pwd.test(state.form.newpass) && reg.pwd.test(state.form.dbnewpass) ){
                myform.value.validateField('dbnewpass')
            }
        }
        const state = reactive({
            // roleList,
            SwitchButton,
            Lock,
            dialogVisible:false,
            form:{},
            rules:{
                oldpass:[
                    {required: true, message: '密码必填'},
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    }
                ],
                newpass:[
                    {required: true, message: '新密码必填'},
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    }
                ],
                dbnewpass:[
                    {required: true, message: '确认密码必填'},
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    },
                    {
                        validator:checkDbPass,
                        message:'两次密码不一样',
                        trigger: 'blur'
                    }
                ],
            }
        })
        const userInfo = computed(()=>store.state.userInfo)
        const logoutAction = ()=>{
            ElMessageBox.confirm(
                '你真的要退出登录吗?',
                '警告',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(() => {
                router.replace({name:'login'})
                sessionStorage.removeItem('token')
                store.commit('changeUserInfo',null)
            })
            
        }
        const collapse = computed(()=>store.state.collapse)
        const toggleclick = (toggle)=>{
            store.commit('changeCollapse',toggle)
            // dispatch 发送action
            // commit 提交mutation 
        }
        const handleCommand = (command)=>{
            console.log(command)
            if(command=='pass'){
                // 弹框修改密码 
                state.dialogVisible = true;
            }else{
                router.push({name:command})
            }
        }
        const handleClose = ()=>{
            state.dialogVisible = false;
        }
        const changePass = ()=>{
            myform.value.validate(async valid=>{
                if(valid){
                    let {code,result} = await ajax.changeuser({
                        password:state.form.newpass 
                    })
                    if(code==200){
                        // 重新登录
                        router.replace({name:'login'})
                        sessionStorage.removeItem('token')
                        store.commit('changeUserInfo',null)
                    }
                }else{
                    ElMessage.error("请输入有效的信息")
                }
            })
        }
        return {
            ...toRefs(state),
            userInfo,
            logoutAction,
            collapse,
            toggleclick,
            handleCommand,
            handleClose,
            myform,
            checkDbNewPass,
            changePass
        }
    }
}
</script>

<style lang="scss" >
.cursor{
    cursor: pointer;
}
.ml10{
    margin-left:16px;
}
.head{
    height:100%;
    .head-row{
        height:100%;
    }
    .icon{
        width:20px;
        height:20px;
        color:darkorange;
        cursor: pointer;
    }
    .headflex{
        display: flex;
        align-items: center;
        height:100%;
    }
    .title{
        color:darkorange;
        font-size: 22px;
        line-height: 1;
    }
    .martext{
        color:#123456;
        padding:0 10px;
    }
    .headinfo{
        height: 100%;
        display: flex;
        align-items: center;
        padding-left:20px;
        position: relative;
        justify-content: center;
        .name{
            font-size: 20px;
            color:#999;
            display: flex;
            align-items: center;
            line-height: 1;
            cursor: pointer;
        }
    }
}
</style>